import { Form, Checkbox, Button, Input } from "antd";
import * as React from "react";
import { addon } from "pao-aop";
import { reactControl } from "pao-aop-client";
import { NTInput } from "src/business/components/input";
import { NTButton } from "src/business/components/button";
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
import './index.less';
import { RowLayout } from "./row-layout";
import { BaseUserInfoForm, BaseUserInfoFormControl } from "src/business/security/base";
import TextArea from "antd/lib/input/TextArea";
import { MainContent } from "src/business/style-components/main-content";
import { MainCard } from "src/business/style-components/main-card";
const FormItem = Form.Item;
export interface UserEditorFormValues {
    /** 用户ID */
    ID?: string;
    /** 姓名 */
    NAME?: string;
    /** 性别 */
    sex?: string;
    /** 手机号 */
    MOBILE?: string;
    /** 身份证号 */
    ID_CARD?: string;
    /** 户口所在地 */
    registeredResidence?: string;
    /** 角色Id */
    roleId?: string;
    /** 角色类型 */
    roleType?: string;
    /** 用户名 */
    userName?: string;
    /** 用户密码 */
    userPsw?: string;
    /** 用户状态 */
    userState?: string;
    /** 登陆账户1（手机号码） */
    loginAccountPhone?: string;
    /** 登陆账户1（邮箱) */
    loginAccountEmail?: string;
    /** 登陆账户1（微信) */
    loginAccountWechat?: string;
    /** 登陆账户1（QQ) */
    loginAccountQQ?: string;
}
/**
 * 组件：设备管理编辑表单
 */
export class UserEditorForm extends BaseUserInfoForm<UserEditorFormControl, {}> {
    /** 提交方法 */
    handleSubmit = (e: any) => {
        e.preventDefault();
        const { form } = this.props;
        form!.validateFields((err: Error, values: UserEditorFormValues) => {
            if (this.props.handleSubmit) {
                this.props.handleSubmit(err, values);
            }
        });
    }
    editor_enterprise = (e: any) => {
        const { form } = this.props;
        form!.validateFields((err: Error, values: UserEditorFormValues) => {
            if (this.props.editor_enterprise) {
                this.props.editor_enterprise!(err, values);
            }
        });
    }
    reset_password = () => {
        const { base_data } = this.props;
        this.props.reset_password!(base_data.id ? base_data.id : '');
    }
    onChange() {

    }
    render() {
        const { getFieldDecorator } = this.props.form!;
        const { base_data, role_list } = this.props;
        return (
            <div>
                <Form onSubmit={this.handleSubmit}>
                    <MainContent>
                        <MainCard title="用户信息">
                            {getFieldDecorator('id', {
                                initialValue: base_data.id ? base_data.id : '',
                                rules: [{
                                    required: false,
                                    message: '请输入角色名称'
                                }],
                            })(
                                <Input style={{ display: 'none' }} />
                            )}
                            <RowLayout>
                                <div style={{ display: 'flex', fontSize: '16px', whiteSpace: 'nowrap' }}>用户名称：</div>
                                {getFieldDecorator('name', {
                                    initialValue: base_data ? base_data.name : '',
                                    rules: [{
                                        required: true,
                                        message: '请输入用户名称'
                                    }],
                                })(
                                    <NTInput height='small' radius='inputDefault' placeholder='请输入用户名称' />
                                )}
                            </RowLayout>
                            <RowLayout><div style={{ display: 'flex', fontSize: '16px', whiteSpace: 'nowrap' }}>登录账号：</div>
                                {getFieldDecorator('account', {
                                    initialValue: base_data ? base_data.account : '',
                                    rules: [{
                                        required: true,
                                        message: '请输入登录账号'
                                    }],
                                })(
                                    <NTInput height='small' radius='inputDefault' placeholder='请输入登录账号' />
                                )}
                            </RowLayout>
                            <RowLayout>
                                <div style={{ display: 'flex', fontSize: '16px', whiteSpace: 'nowrap' }}>手机号码：</div>
                                {getFieldDecorator('mobile', {
                                    initialValue: base_data ? base_data.mobile : '',
                                    rules: [{
                                        required: false,
                                        message: '请输入手机号码'
                                    }],
                                })(
                                    <NTInput disabled={true} readOnly={true} placeholder='' height='small' radius='inputDefault' />
                                )}
                            </RowLayout>
                            <RowLayout>
                                <div style={{ display: 'flex', fontSize: '16px', whiteSpace: 'nowrap' }}>电子邮箱：</div>
                                {getFieldDecorator('emaile', {
                                    initialValue: base_data ? base_data.emaile : '',
                                    rules: [{
                                        required: false,
                                        message: '请输入电子邮箱'
                                    }],
                                })(
                                    <NTInput disabled={true} readOnly={true} placeholder='' height='small' radius='inputDefault' />
                                )}
                            </RowLayout>
                            <RowLayout>
                                <div style={{ display: 'flex', fontSize: '16px', whiteSpace: 'nowrap' }}>登录密码：</div>
                                {getFieldDecorator('password', {
                                    initialValue: base_data ? base_data.password : '',
                                    rules: [{
                                        required: false,
                                        message: '请输入登录密码'
                                    }],
                                })(
                                    <NTInput disabled={true} readOnly={true} placeholder='' height='small' radius='inputDefault' />
                                )}
                                {!this.props.is_add ? <Button onClick={this.reset_password} style={{ float: "right", marginRight: "-84px", marginTop: '-31px' }}>重置</Button> : ''}
                            </RowLayout>
                            <RowLayout>
                                <div style={{ display: 'flex', fontSize: '16px', whiteSpace: 'nowrap' }}>角色：</div>
                                <div style={{ width: '100%' }}>
                                    {getFieldDecorator('role_id', {
                                        initialValue: base_data ? base_data.role_id : [],
                                        rules: [{
                                            required: true,
                                            message: '选择角色'
                                        }],
                                    })(
                                        <Checkbox.Group style={{ width: '100%' }} onChange={this.onChange}>
                                            {
                                                role_list!.map((item) => {
                                                    return <Checkbox style={{ marginLeft: 0, marginRight: '8px' }} value={item.id} key={item.id}>{item.role_name}</Checkbox>;
                                                })
                                            }
                                        </Checkbox.Group>
                                    )}
                                </div>
                            </RowLayout>
                            <RowLayout>
                                <div style={{ display: 'flex', fontSize: '16px', whiteSpace: 'nowrap' }}>说明：</div>
                                {getFieldDecorator('comment', {
                                    initialValue: base_data ? base_data.comment : '',
                                    rules: [{
                                        required: false,
                                        message: '说明'
                                    }],
                                })(
                                    <TextArea rows={4} />
                                )}
                            </RowLayout>
                            <RowLayout>
                                <div style={{ display: 'flex', fontSize: '16px', whiteSpace: 'nowrap' }} />
                                <div>{
                                    this.props.is_show ?
                                        !this.props.is_add ?
                                            (
                                                <div style={{ marginRight: '10px' }}>
                                                    <NTButton name='编辑企业模版标识' htmlType='button' onClick={this.editor_enterprise} />
                                                </div>
                                            )
                                            : (
                                                <div style={{ marginRight: '10px' }}>
                                                    <NTButton name='新建企业模版标识' htmlType='button' onClick={this.editor_enterprise} />
                                                </div>
                                            )
                                        : ''
                                }
                                </div>
                            </RowLayout>
                        </MainCard>
                    </MainContent>
                    <FormItem>
                        <div style={{ display: 'flex', justifyContent: 'center', paddingBottom: '50px' }}>
                            <div style={{ marginRight: '10px' }}>
                                <NTButton height='small' name='保存' htmlType='submit' />
                            </div>
                            <div style={{ marginRight: '10px' }}>
                                <NTButton height='small' name='返回' htmlType='button' type='ghost' onClick={this.props.return_btn} />
                            </div>

                        </div>
                    </FormItem>
                </Form>
            </div>
        );
    }
}

/**
 * 控件：设备管理编辑表单
 */
@addon('UserEditorForm', '设备管理编辑表单', '设备管理编辑表单控件')
@reactControl(Form.create<UserEditorFormControl>()(UserEditorForm))
export class UserEditorFormControl extends BaseUserInfoFormControl {
    /** 提交回调 */
    public handleSubmit?: (err: Error, values?: UserEditorFormValues) => void;
    /** 返回回调 */
    public handleBack?: () => void;
    /** 用户资料数据 */
    public base_data?: any;
    /** 是否为新增 */
    is_add?: boolean;
    /** 角色列表 */
    role_list?: any[];
    /** 重置密码 */
    reset_password?: (id: string) => void;
    /** 返回按钮 */
    return_btn?: () => void;
    /** 新增编辑企业 */
    editor_enterprise?: (err: Error, values?: UserEditorFormValues) => void;
    /** 是否显示新增或编辑企业 */
    is_show?: boolean;
    constructor() {
        super();
    }
}

export default Form.create<UserEditorFormControl>()(UserEditorForm);